<template>
  <div class="aireport-container">
    <!-- 顶部区域 -->
    <div class="head">
      <div class="logo">
        <img src="/images/yidou-logo.png" alt="" />
        <span>百搜优化-视频号</span>
      </div>
      <div class="title">
        <div class="name stroke">{{ companyName }}</div>
        <div class="date">开通日期：{{ openDate }} {{ openDays }}天</div>
      </div>
    </div>

    <!-- 报表主体内容区 -->
    <div class="content">
      <!-- 主要数据展示区 -->
      <div class="vital">
        <div class="vital_item vital_item_1">
          <img src="/images/vital1.png" alt="" />
          <div class="txt">
            <div class="name">发布量</div>
            <div class="num">{{ vitalData.publishCount }}</div>
          </div>
        </div>
        <div class="vital_item vital_item_2">
          <img src="/images/vital2.png" alt="" />
          <div class="txt">
            <div class="name">播放量</div>
            <div class="num">{{ vitalData.playCount }}</div>
          </div>
        </div>
        <div class="vital_item vital_item_3">
          <img src="/images/vital3.png" alt="" />
          <div class="txt">
            <div class="name">互动量</div>
            <div class="num">{{ vitalData.interactCount }}</div>
          </div>
        </div>
        <div class="vital_item vital_item_4">
          <img src="/images/vital4.png" alt="" />
          <div class="txt">
            <div class="name">客户量</div>
            <div class="num">{{ vitalData.customerCount }}</div>
          </div>
        </div>
        <div class="vital_item vital_item_5">
          <img src="/images/vital5.png" alt="" />
          <div class="txt">
            <div class="name">优化词</div>
            <div class="num">{{ vitalData.optimizeCount }}</div>
          </div>
        </div>
        <div class="vital_item vital_item_6">
          <img src="/images/vital6.png" alt="" />
          <div class="txt">
            <div class="name">排名词</div>
            <div class="num">{{ vitalData.rankCount }}</div>
          </div>
        </div>
      </div>

      <!-- 平台统计 图表 -->
      <div class="platform"></div>

      <!-- 客户、互动数据 -->
      <div class="leek">
        <!-- 询盘客户数据 -->
        <div class="box custom">
          <div class="box_title">
            <span>询盘客户数据</span>
          </div>
          <div class="inquiry-list">
            <div v-for="(customer, index) in inquiryCustomers" :key="index" class="inquiry_item">
              <img src="/images/tos-cn-i-0813c001_oUwiggbKADAEqB50iAhl0ZrwCFIIvSPPAAuFu.jpeg" alt="" />
              <span class="company text_ellipsis_1">{{ customer.userName }}</span>
              <a-tag color="success">新线索</a-tag>
              <span class="source">询盘</span>
              <span class="phone"></span>
              <span class="time">{{ formatRelativeTime(customer.createTime) }}</span>
            </div>
          </div>
        </div>

        <!-- 视频号互动数据 -->
        <div class="box interact">
          <div class="head">
            <div class="box_title">
              <span>视频号互动数据</span>
            </div>
            <a-radio-group v-model:value="interactTimeRange" button-style="solid" @change="handleInteractTimeChange">
              <a-radio-button value="recent7">近7天</a-radio-button>
              <a-radio-button value="recent30">近30天</a-radio-button>
            </a-radio-group>
          </div>
          <div ref="interactChartRef" class="interact_chart"></div>
        </div>

        <!-- 优化排名数据 -->
        <div class="box rank">
          <div class="head">
            <div class="box_title">
              <span>优化词排名数据</span>
            </div>
            <span class="tips">因排序为千人千面，不同区域用户查到的结果有差异</span>
            <a-radio-group v-model:value="rankTimeRange" button-style="solid" @change="handleRankTimeChange">
              <a-radio-button value="all">全部</a-radio-button>
              <a-radio-button value="recent7">近7天</a-radio-button>
              <a-radio-button value="recent30">近30天</a-radio-button>
            </a-radio-group>
            <a-select v-model:value="rankPeriod" style="width: 80px" size="small" @change="handleRankPeriodChange">
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="recent7">近7天</a-select-option>
              <a-select-option value="recent30">近30天</a-select-option>
            </a-select>
          </div>
          <div class="rank_content">
            <div class="pie">
              <div class="pie_item pie_item_1">
                <img class="spin_l_8" src="/images/optimize.png" alt="" />
                <div class="num">{{ rankData.optimizeWords }}</div>
                <div class="txt">优化词</div>
              </div>
              <div class="pie_items_row">
                <div class="pie_item pie_item_2">
                  <img class="spin_l_8" src="/images/optimize.png" alt="" />
                  <div class="num">{{ rankData.top10 }}</div>
                  <div class="txt">TOP10</div>
                </div>
                <div class="pie_item pie_item_3">
                  <img class="spin_l_8" src="/images/optimize.png" alt="" />
                  <div class="num">{{ rankData.top20 }}</div>
                  <div class="txt">TOP20</div>
                </div>
                <div class="pie_item pie_item_4">
                  <img class="spin_l_8" src="/images/optimize.png" alt="" />
                  <div class="num">{{ rankData.top30 }}</div>
                  <div class="txt">TOP30</div>
                </div>
              </div>
            </div>
            <div class="table">
              <div class="table_head">
                <div class="keyword">
                  <span>关键词</span>
                </div>
                <div class="num">
                  <span>排名</span>
                </div>
                <div class="account">账号</div>
                <div class="date">
                  <span>查询时间</span>
                </div>
              </div>
              <div class="table_content">
                <div v-for="(item, index) in rankingList" :key="index" class="table_item">
                  <span class="keyword text_ellipsis_1">{{ item.keyword }}</span>
                  <span class="num">{{ item.rank }}</span>
                  <span class="account text_ellipsis_1">{{ item.account }}</span>
                  <span class="date">{{ item.date }}</span>
                </div>
              </div>
              <div class="footPage">
                <a-pagination
                  v-model:current="currentPage"
                  v-model:page-size="pageSize"
                  :total="totalRanking"
                  :page-size-options="pageSizeOptions"
                  show-quick-jumper
                  show-size-changer
                  show-total
                  @change="handlePageChange"
                  @show-size-change="handlePageSizeChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统名 -->
    <div class="system">一站式AI短视频营销解决方案</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
import { message } from 'ant-design-vue'
import getKeywordRankingList, { type KeywordRankingItem } from '@/services/analysis/getKeywordRankingList'
import { getKeywordStatistics } from '@/services/analysis/getKeywordStatistics'
import useComprehensiveAnalysisAPI, {
  type ComprehensiveAnalysisResponse
} from '@/services/analysis/getComprehensiveAnalysis'
import useUserInfoAPI, { type UserInfoItem } from '@/services/analysis/getUserInfo'
import useInteractionStatsAPI, { type InteractionStatsItem } from '@/services/analysis/getInteractionStats'

const route = useRoute()

// 订单ID - 直接从路由参数中获取
const orderId = ref<string | number>(route.params.orderId || route.query.orderId)
// 基础数据 - 初始值从 API 获取，不使用硬编码
const companyName = ref('') // 将从综合分析 API 获取
const openDate = ref('') // 将从综合分析 API 获取
const openDays = ref(0) // 将根据开通日期计算

// 核心数据 - 初始值为 0，不显示假数据
const vitalData = ref({
  publishCount: 0,
  playCount: '0',
  interactCount: 0,
  customerCount: 0,
  optimizeCount: 0,
  rankCount: 0
})

// 排名数据 - 初始值为 0
const rankData = ref({
  optimizeWords: 0,
  top10: 0,
  top20: 0,
  top30: 0
})

// 询盘客户数据 - 使用API数据
const inquiryCustomers = ref<UserInfoItem[]>([])

// 排名列表数据 - 使用真实API数据
interface RankingItem {
  keyword: string
  rank: number
  account: string
  date: string
}

const rankingList = ref<RankingItem[]>([])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const totalRanking = ref(0)
const pageSizeOptions = ref(['10', '20', '30', '50', '100'])

// 使用关键词排名API
const [keywordRankingResponse, fetchKeywordRanking] = getKeywordRankingList()
// 使用关键词统计API
const [keywordStatisticsResponse, fetchKeywordStatistics] = getKeywordStatistics()
// 使用综合分析API
const [comprehensiveResponse, fetchComprehensiveAnalysis] = useComprehensiveAnalysisAPI()
// 使用用户信息API
const [userInfoResponse, fetchUserInfo] = useUserInfoAPI()
// 使用互动数据统计API
const [interactionStatsResponse, fetchInteractionStats] = useInteractionStatsAPI()

// 各个图表的时间范围选择
const releaseTimeRange = ref('all')
const releasePlatform = ref('all')
const interactTimeRange = ref('recent7')
const rankTimeRange = ref('all')
const rankPeriod = ref('all')

// 图表引用
const releaseChartRef = ref<HTMLElement>()
const interactChartRef = ref<HTMLElement>()

// 初始化图表
const initCharts = () => {
  nextTick(() => {
    // 初始化互动数据图表 - 先显示空状态，等待API数据
    if (interactChartRef.value) {
      const interactChart = echarts.init(interactChartRef.value)
      interactChart.setOption({
        title: {
          text: '加载中...',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#999'
          }
        }
      })
    }
  })
}

// 事件处理函数
const handleInteractTimeChange = (e: any) => {
  // 将界面选择的时间范围转换为API需要的参数
  let timeRange = 1 // 默认近7天
  if (e.target.value === 'recent7') {
    timeRange = 1 // 近7天
  } else if (e.target.value === 'recent30') {
    timeRange = 2 // 近30天
  }

  // 重新加载互动数据
  loadInteractionStatsData(timeRange)
}

// 防止重复请求的标志
const isLoading = ref(false)

// 获取关键词排名数据
const loadKeywordRankingData = async () => {
  // 防止重复请求
  if (isLoading.value) {
    console.log('API调用已在进行中，跳过重复请求')
    return
  }

  isLoading.value = true

  try {
    const timeRangeValue =
      rankTimeRange.value === 'recent7'
        ? 7
        : rankTimeRange.value === 'recent30'
          ? 30
          : rankTimeRange.value === 'all'
            ? 0
            : Number(rankTimeRange.value)

    // 正确解构fetchKeywordRanking的返回值 [err, res]
    const [err, res] = await fetchKeywordRanking({
      orderId: orderId.value,
      timeRange: timeRangeValue,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })

    // 只有当err不为null时才是真正的错误
    if (err !== null) {
      console.error('获取关键词排名数据失败:', err)
      // API失败时重置排名列表数据
      rankingList.value = []
      totalRanking.value = 0
      return
    }

    // 转换API数据为页面需要的格式
    if (keywordRankingResponse.value?.keywords) {
      const keywords = keywordRankingResponse.value.keywords as KeywordRankingItem[]

      rankingList.value = keywords.map((item: KeywordRankingItem) => ({
        keyword: item.keyword,
        rank: item.ranking,
        account: item.accountName,
        date: item.createTime
      }))

      totalRanking.value = keywordRankingResponse.value?.totalSize || 0
    } else {
      // 数据为空时重置排名列表数据
      rankingList.value = []
      totalRanking.value = 0
    }
  } catch (error) {
    console.error('获取关键词排名数据异常:', error)
    // 异常时重置排名列表数据
    rankingList.value = []
    totalRanking.value = 0
  } finally {
    isLoading.value = false
  }
}

// 获取关键词统计数据
const loadKeywordStatisticsData = async () => {
  // 防止重复请求
  if (isLoading.value) {
    console.log('API调用已在进行中，跳过重复请求')
    return
  }

  isLoading.value = true

  try {
    const timeRangeValue =
      rankTimeRange.value === 'recent7'
        ? 7
        : rankTimeRange.value === 'recent30'
          ? 30
          : rankTimeRange.value === 'all'
            ? 0
            : Number(rankTimeRange.value)

    // 正确解构fetchKeywordStatistics的返回值 [err, res]
    const [err, res] = await fetchKeywordStatistics({
      orderId: orderId.value,
      timeRange: timeRangeValue
    })

    // 只有当err不为null时才是真正的错误
    if (err !== null) {
      console.error('获取关键词统计数据失败:', err)
      // API调用失败时重置排名数据
      rankData.value.optimizeWords = 0
      rankData.value.top10 = 0
      rankData.value.top20 = 0
      rankData.value.top30 = 0
      return
    }

    // 更新排名统计数据
    if (keywordStatisticsResponse.value) {
      rankData.value.optimizeWords = keywordStatisticsResponse.value.total || 0
      rankData.value.top10 = keywordStatisticsResponse.value.top10 || 0
      rankData.value.top20 = keywordStatisticsResponse.value.top20 || 0
      rankData.value.top30 = keywordStatisticsResponse.value.top30 || 0
    } else {
      // 数据为空时重置排名数据
      rankData.value.optimizeWords = 0
      rankData.value.top10 = 0
      rankData.value.top20 = 0
      rankData.value.top30 = 0
    }
  } catch (error) {
    console.error('获取关键词统计数据异常:', error)
    // 异常时重置排名数据
    rankData.value.optimizeWords = 0
    rankData.value.top10 = 0
    rankData.value.top20 = 0
    rankData.value.top30 = 0
  } finally {
    isLoading.value = false
  }
}

// 计算TOP N的关键词数量
// 注：此函数不再使用，数据由新API提供
const keywordsInTopN = (n: number) => {
  if (!keywordRankingResponse.value?.keywords) return 0
  return (keywordRankingResponse.value.keywords as KeywordRankingItem[]).filter(
    (item: KeywordRankingItem) => item.ranking <= n
  ).length
}

const handleRankTimeChange = (e: any) => {
  console.log('排名时间范围变更:', e.target.value)
  currentPage.value = 1
  loadKeywordRankingData()
  loadKeywordStatisticsData()
}

const handleRankPeriodChange = (value: string) => {
  console.log('排名周期变更:', value)
  currentPage.value = 1
  loadKeywordRankingData()
  loadKeywordStatisticsData()
}

const handlePageChange = (page: number) => {
  console.log('页面变更:', page)
  currentPage.value = page
  loadKeywordRankingData()
}

const handlePageSizeChange = (current: number, size: number) => {
  console.log('页面大小变更:', size)
  pageSize.value = size
  currentPage.value = 1 // 重置到第一页
  loadKeywordRankingData()
}

// 获取综合分析数据
const loadComprehensiveAnalysisData = async () => {
  if (isLoading.value) {
    console.log('API调用已在进行中，跳过重复请求')
    return
  }

  console.log('开始调用综合分析API:', { orderId: orderId.value })
  isLoading.value = true

  try {
    const [err, res] = await fetchComprehensiveAnalysis({
      orderId: orderId.value
    })

    if (err !== null) {
      console.error('获取综合分析数据失败:', err)
      // API失败时重置所有数据为初始状态
      companyName.value = ''
      openDate.value = ''
      openDays.value = 0
      vitalData.value = {
        publishCount: 0,
        playCount: '0',
        interactCount: 0,
        customerCount: 0,
        optimizeCount: 0,
        rankCount: 0
      }
      return
    }

    // 更新页面数据
    const backendData = comprehensiveResponse.value?.data?.data

    if (backendData) {
      // 1. 更新订单基本信息
      companyName.value = backendData.orderInfo?.customerName || ''
      if (backendData.orderInfo?.createTime) {
        openDate.value = new Date(backendData.orderInfo.createTime).toLocaleDateString()
        // 计算开通天数
        const createDate = new Date(backendData.orderInfo.createTime)
        const today = new Date()
        const diffTime = today.getTime() - createDate.getTime()
        openDays.value = Math.floor(diffTime / (1000 * 60 * 60 * 24))
      } else {
        openDate.value = ''
        openDays.value = 0
      }

      // 2. 更新视频数据统计
      vitalData.value.publishCount = backendData.feedsCount || 0
      vitalData.value.playCount = formatPlayCount(backendData.playCount || 0)
      vitalData.value.interactCount = backendData.interactionCount || 0

      // 3. 更新客户数据
      vitalData.value.customerCount = backendData.customerCount || 0

      // 4. 更新优化词和排名词数量
      vitalData.value.optimizeCount = backendData.optimizedWordCount || 0
      vitalData.value.rankCount = backendData.rankingKeywordCount || 0
    } else {
      // 数据为空时重置所有数据
      companyName.value = ''
      openDate.value = ''
      openDays.value = 0
      vitalData.value = {
        publishCount: 0,
        playCount: '0',
        interactCount: 0,
        customerCount: 0,
        optimizeCount: 0,
        rankCount: 0
      }
    }
  } catch (error) {
    console.error('获取综合分析数据异常:', error)
    // 异常时重置所有数据
    companyName.value = ''
    openDate.value = ''
    openDays.value = 0
    vitalData.value = {
      publishCount: 0,
      playCount: '0',
      interactCount: 0,
      customerCount: 0,
      optimizeCount: 0,
      rankCount: 0
    }
  } finally {
    isLoading.value = false
  }
}

// 格式化播放量显示
const formatPlayCount = (count: number): string => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + 'w'
  } else if (count >= 1000) {
    return (count / 1000).toFixed(1) + 'k'
  }
  return String(count)
}

// 获取用户信息数据
const loadUserInfoData = async () => {
  if (isLoading.value) {
    console.log('API调用已在进行中，跳过重复请求')
    return
  }

  isLoading.value = true

  try {
    const [err, res] = await fetchUserInfo({
      orderId: orderId.value
    })

    if (err !== null) {
      console.error('获取用户信息失败:', err)
      inquiryCustomers.value = []
      return
    }

    const backendResponse = userInfoResponse.value?.data

    if (backendResponse && backendResponse.code !== undefined) {
      if (backendResponse.code !== 0) {
        console.error('API返回错误:', backendResponse.msg || '未知错误')
        inquiryCustomers.value = []
        return
      }
    }

    // 更新用户信息数据
    if (backendResponse && Array.isArray(backendResponse.data)) {
      inquiryCustomers.value = backendResponse.data
    } else {
      inquiryCustomers.value = []
    }
  } catch (error) {
    console.error('获取用户信息异常:', error)
    inquiryCustomers.value = []
  } finally {
    isLoading.value = false
  }
}

// 获取互动数据统计
const loadInteractionStatsData = async (timeRange?: number) => {
  if (isLoading.value) {
    console.log('API调用已在进行中，跳过重复请求')
    return
  }

  isLoading.value = true

  try {
    const [err, res] = await fetchInteractionStats({
      orderId: orderId.value,
      timeRange: timeRange || 1
    })

    if (err !== null) {
      console.error('获取互动数据统计失败:', err)
      // API失败时清空图表
      updateInteractionChart([])
      return
    }

    // 更新互动数据并更新图表
    const backendData = interactionStatsResponse.value?.data?.data

    if (backendData) {
      updateInteractionChart(backendData)
    } else {
      // 数据为空时清空图表
      updateInteractionChart([])
    }
  } catch (error) {
    console.error('获取互动数据统计异常:', error)
    // 异常时清空图表
    updateInteractionChart([])
  } finally {
    isLoading.value = false
  }
}

// 更新互动数据图表
const updateInteractionChart = (data: InteractionStatsItem[]) => {
  nextTick(() => {
    if (interactChartRef.value) {
      const interactChart = echarts.init(interactChartRef.value)

      // 如果没有数据，初始化空图表框架
      if (!data || data.length === 0) {
        interactChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['点赞', '评论', '分享']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '点赞',
              type: 'line',
              data: [],
              itemStyle: {
                color: '#ff7875'
              }
            },
            {
              name: '评论',
              type: 'line',
              data: [],
              itemStyle: {
                color: '#ffa940'
              }
            },
            {
              name: '分享',
              type: 'line',
              data: [],
              itemStyle: {
                color: '#52c41a'
              }
            }
          ]
        })
        return
      }

      // 准备图表数据
      const dates = data.map((item) => {
        const date = new Date(item.date)
        return `${date.getMonth() + 1}/${date.getDate()}`
      })
      const upvoteData = data.map((item) => item.totalUpvoteCount || 0)
      const commentData = data.map((item) => item.totalCommentCount || 0)
      const forwardData = data.map((item) => item.totalForwardCount || 0)

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['点赞', '评论', '分享']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '点赞',
            type: 'line',
            data: upvoteData,
            itemStyle: {
              color: '#ff7875'
            },
            connectNulls: true
          },
          {
            name: '评论',
            type: 'line',
            data: commentData,
            itemStyle: {
              color: '#ffa940'
            },
            connectNulls: true
          },
          {
            name: '分享',
            type: 'line',
            data: forwardData,
            itemStyle: {
              color: '#52c41a'
            },
            connectNulls: true
          }
        ]
      }

      interactChart.setOption(option, true)
    }
  })
}

// 格式化相对时间显示
const formatRelativeTime = (createTime: string): string => {
  const now = new Date()
  const created = new Date(createTime)
  const diffTime = now.getTime() - created.getTime()
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))

  if (diffDays === 0) {
    return '今天'
  } else if (diffDays === 1) {
    return '昨天'
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else if (diffDays < 30) {
    const weeks = Math.floor(diffDays / 7)
    return `${weeks}周前`
  } else if (diffDays < 365) {
    const months = Math.floor(diffDays / 30)
    return `${months}个月前`
  } else {
    const years = Math.floor(diffDays / 365)
    return `${years}年前`
  }
}

// 模拟加载用户数据
const loadUserData = async () => {
  // 初始化图表
  initCharts()

  // 调用综合分析API获取所有数据
  await loadComprehensiveAnalysisData()

  // 调用用户信息API获取询盘客户数据
  await loadUserInfoData()

  // 调用互动数据统计API获取默认时间范围的互动数据
  await loadInteractionStatsData(1) // 默认近7天

  // 调用关键词相关API
  await loadKeywordStatisticsData()
  await loadKeywordRankingData()
}

onMounted(() => {
  loadUserData()
})
</script>

<style lang="less" scoped>
.aireport-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.95);
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    .logo {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      color: #333;

      img {
        width: 40px;
        height: 40px;
        margin-right: 12px;
      }
    }

    .title {
      text-align: right;

      .name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 4px;
      }

      .date {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .content {
    .vital {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 20px;

      .vital_item {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.95);
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

        img {
          width: 48px;
          height: 48px;
          margin-right: 16px;
        }

        .txt {
          .name {
            font-size: 14px;
            color: #666;
            margin-bottom: 4px;
          }

          .num {
            font-size: 24px;
            font-weight: bold;
            color: #333;
          }
        }
      }
    }

    .platform {
      display: none;
      margin-bottom: 20px;
    }

    .leek {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;

      .box {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

        .box_title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin-bottom: 16px;
        }

        &.custom {
          .inquiry-list {
            max-height: 400px;
            overflow-y: auto;

            .inquiry_item {
              display: flex;
              align-items: center;
              padding: 12px 0;
              border-bottom: 1px solid #f0f0f0;

              &:last-child {
                border-bottom: none;
              }

              img {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                margin-right: 12px;
              }

              .company {
                flex: 1;
                font-size: 14px;
                color: #333;
              }

              .source {
                margin: 0 12px;
                font-size: 12px;
                color: #666;
              }

              .phone {
                margin-right: 12px;
                font-size: 12px;
                color: #666;
              }

              .time {
                font-size: 12px;
                color: #999;
              }
            }
          }
        }

        &.interact {
          .head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
          }

          .interact_chart {
            height: 352px;
          }
        }

        &.rank {
          grid-column: 1 / -1;

          .head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;

            .tips {
              font-size: 12px;
              color: #999;
            }
          }

          .rank_content {
            display: flex;
            gap: 20px;

            .pie {
              flex: 0 0 30%; /* 左侧占30% */

              display: grid;
              grid-template-columns: 1fr;
              grid-template-rows: auto auto;
              gap: 12px;

              .pie_item {
                text-align: center;
                padding: 20px 16px;
                background: #f8f9fa;
                border-radius: 10px;
                transition:
                  transform 0.2s ease,
                  box-shadow 0.2s ease;
                cursor: pointer;

                &:hover {
                  transform: translateY(-2px);
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                }

                img {
                  width: 52px;
                  height: 52px;
                  margin-bottom: 10px;
                  transition: transform 0.2s ease;
                }

                &:hover img {
                  transform: scale(1.05);
                }

                .num {
                  font-size: 26px;
                  font-weight: bold;
                  color: #333;
                  margin-bottom: 4px;
                }

                .txt {
                  font-size: 14px;
                  color: #666;
                }
              }

              .pie_item_1 {
                padding: 25px 16px;

                img {
                  width: 60px;
                  height: 60px;
                  margin-bottom: 12px;
                }

                .num {
                  font-size: 30px;
                  margin-bottom: 6px;
                }

                .txt {
                  font-size: 15px;
                }
              }

              .pie_items_row {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
              }

              .pie_item_2,
              .pie_item_3,
              .pie_item_4 {
                padding: 16px 12px;

                img {
                  width: 48px;
                  height: 48px;
                  margin-bottom: 8px;
                }

                .num {
                  font-size: 24px;
                  margin-bottom: 4px;
                }

                .txt {
                  font-size: 13px;
                }
              }
            }

            .table {
              flex: 0 0 70%; /* 右侧占70% */

              .table_head {
                display: grid;
                grid-template-columns: 2fr 1fr 2fr 1fr;
                gap: 16px;
                padding: 12px 0;
                border-bottom: 2px solid #e8e8e8;
                font-weight: bold;
                color: #333;

                .sort {
                  display: flex;
                  flex-direction: column;
                  margin-left: 4px;

                  .up,
                  .down {
                    width: 0;
                    height: 0;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                  }

                  .up {
                    border-bottom: 6px solid #999;
                    margin-bottom: 2px;
                  }

                  .down {
                    border-top: 6px solid #999;
                  }

                  .order {
                    border-bottom-color: #1890ff;
                  }
                }
              }

              .table_content {
                .table_item {
                  display: grid;
                  grid-template-columns: 2fr 1fr 2fr 1fr;
                  gap: 16px;
                  align-items: center;
                  padding: 12px 0;
                  border-bottom: 1px solid #f0f0f0;

                  &:hover {
                    background: #f8f9fa;
                  }

                  .keyword {
                    color: #333;
                    font-size: 14px;
                  }

                  .num {
                    color: #1890ff;
                    font-weight: bold;
                    font-size: 14px;
                  }

                  .account {
                    color: #666;
                    font-size: 14px;
                  }

                  .date {
                    color: #999;
                    font-size: 12px;
                  }

                  .look {
                    text-align: center;

                    img {
                      width: 20px;
                      height: 20px;
                      cursor: pointer;
                    }
                  }
                }
              }

              .footPage {
                display: flex;
                justify-content: flex-end;
                margin-top: 20px;
                width: 70%;
                margin-left: auto;
              }
            }
          }
        }
      }
    }
  }

  .system {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 40px;
  }
}

.text_ellipsis_1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spin_l_8 {
  animation: spin 8s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .platform {
    grid-template-columns: 1fr !important;
  }

  .leek {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .aireport-container {
    padding: 10px;

    .head {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .vital {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .rank_content {
      flex-direction: column !important;
    }
  }
}
</style>
